﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>表单复选框 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-checkbox-inputs" class="nav-link font-weight-bold"><span>表单复选框(Form Checkbox Inputs)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#checkbox-group-options-array" class="nav-link"><span>复选框组选项数组</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#options-as-an-array-of-objects" class="nav-link"><span>选项作为对象数组</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#changing-the-option-field-names" class="nav-link"><span>更改选项字段名称</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#inline-and-stacked-checkboxes" class="nav-link"><span>内联和堆叠复选框</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#control-sizing" class="nav-link"><span>控制尺寸</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#checkbox-values-and-v-model" class="nav-link"><span>复选框值和 v-model</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#multiple-checkboxes-and-accessibility" class="nav-link"><span>多个复选框和可访问性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#button-style-checkboxes" class="nav-link"><span>按钮样式复选框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#individual-checkbox-button-style" class="nav-link"><span>单个复选框按钮样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#grouped-button-style-checkboxes" class="nav-link"><span>分组按钮样式复选框</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#switch-style-checkboxes" class="nav-link"><span>切换样式复选框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#individual-checkbox-switch-style" class="nav-link"><span>单独的复选框开关样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#grouped-switch-style-checkboxes" class="nav-link"><span>分组开关样式复选框</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#switch-sizing" class="nav-link"><span>开关尺寸</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#non-custom-check-inputs-plain" class="nav-link"><span>非定制检查输入（纯文本）</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-states" class="nav-link"><span>上下文状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#contextual-state-and-validation-example" class="nav-link"><span>上下文状态和验证示例</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#required-constraint" class="nav-link"><span>所需约束</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#autofocus" class="nav-link"><span>自动聚焦</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#indeterminate-tri-state-support" class="nav-link"><span>不确定（三态）支持</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#indeterminate-state-and-accessibility" class="nav-link"><span>不确定的状态和可访问性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-checkbox-group" class="nav-link"><span>&lt;b-form-checkbox-group&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-checkbox" class="nav-link"><span>&lt;b-form-checkbox&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">表单复选框</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">表单复选框(Form Checkbox Inputs)</h1>
<p class="bd-lead">为了实现跨浏览器的一致性，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 使用 Bootstrap 的自定义复选框输入来替换浏览器默认复选框输入。 它建立在语义和可访问标记之上，因此可以替代默认的复选框输入。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#checkbox-group-options-array" class=""><span data-v-811345e6="">Checkbox group options array</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#options-as-an-array-of-objects" class=""><span data-v-811345e6="">Options as an array of objects</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#changing-the-option-field-names" class=""><span data-v-811345e6="">Changing the option field names</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#inline-and-stacked-checkboxes" class=""><span data-v-811345e6="">Inline and stacked checkboxes</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#control-sizing" class=""><span data-v-811345e6="">Control sizing</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#checkbox-values-and-v-model" class=""><span data-v-811345e6="">Checkbox values and v-model</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#multiple-checkboxes-and-accessibility" class=""><span data-v-811345e6="">Multiple checkboxes and accessibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#button-style-checkboxes" class=""><span data-v-811345e6="">Button style checkboxes</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#individual-checkbox-button-style" class=""><span data-v-811345e6="">Individual checkbox button style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#grouped-button-style-checkboxes" class=""><span data-v-811345e6="">Grouped button style checkboxes</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#switch-style-checkboxes" class=""><span data-v-811345e6="">Switch style checkboxes</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#individual-checkbox-switch-style" class=""><span data-v-811345e6="">Individual checkbox switch style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#grouped-switch-style-checkboxes" class=""><span data-v-811345e6="">Grouped switch style checkboxes</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#switch-sizing" class=""><span data-v-811345e6="">Switch sizing</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#non-custom-check-inputs-plain" class=""><span data-v-811345e6="">Non custom check inputs (plain)</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#contextual-states" class=""><span data-v-811345e6="">Contextual states</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#contextual-state-and-validation-example" class=""><span data-v-811345e6="">Contextual state and validation example</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#required-constraint" class=""><span data-v-811345e6="">Required constraint</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#autofocus" class=""><span data-v-811345e6="">Autofocus</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#indeterminate-tri-state-support" class=""><span data-v-811345e6="">Indeterminate (tri-state) support</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#indeterminate-state-and-accessibility" class=""><span data-v-811345e6="">Indeterminate state and accessibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-checkbox-group" class=""><span data-v-811345e6="">&lt;b-form-checkbox-group&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-checkbox" class=""><span data-v-811345e6="">&lt;b-form-checkbox&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p><strong>示例1：</strong> 单选框</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox notranslate">
<div>
<div class="custom-control custom-checkbox">
<input id="checkbox-1" type="checkbox" name="checkbox-1" autocomplete="off" class="custom-control-input" value="accepted">
<label for="checkbox-1" class="custom-control-label"> I accept the terms and use </label>
</div>
<div>State: <strong>not_accepted</strong></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox-1"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"status"</span>
      <span class="hljs-attr">name</span>=<span class="hljs-string">"checkbox-1"</span>
      <span class="hljs-attr">value</span>=<span class="hljs-string">"accepted"</span>
      <span class="hljs-attr">unchecked-value</span>=<span class="hljs-string">"not_accepted"</span>
    &gt;</span>
      I accept the terms and use
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>State: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ status }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">status</span>: <span class="hljs-string">'not_accepted'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>示例2：</strong> 多选复选框</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-multiple notranslate">
<div>
<fieldset class="form-group" id="__BVID__3114">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3114__BV_label_">Using options array:</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div id="checkbox-group-1" role="group" tabindex="-1" class="bv-no-focus-ring">
<div class="custom-control custom-control-inline custom-checkbox">
<input id="checkbox-group-1__BV_option_0_" type="checkbox" name="flavour-1" autocomplete="off" class="custom-control-input" value="orange">
<label for="checkbox-group-1__BV_option_0_" class="custom-control-label"><span>Orange</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input id="checkbox-group-1__BV_option_1_" type="checkbox" name="flavour-1" autocomplete="off" class="custom-control-input" value="apple">
<label for="checkbox-group-1__BV_option_1_" class="custom-control-label"><span>Apple</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input id="checkbox-group-1__BV_option_2_" type="checkbox" name="flavour-1" autocomplete="off" class="custom-control-input" value="pineapple">
<label for="checkbox-group-1__BV_option_2_" class="custom-control-label"><span>Pineapple</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input id="checkbox-group-1__BV_option_3_" type="checkbox" name="flavour-1" autocomplete="off" class="custom-control-input" value="grape">
<label for="checkbox-group-1__BV_option_3_" class="custom-control-label"><span>Grape</span></label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3120">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3120__BV_label_">Using sub-components:</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div id="checkbox-group-2" role="group" tabindex="-1" class="bv-no-focus-ring">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-2" autocomplete="off" class="custom-control-input" value="orange" id="__BVID__3122">
<label class="custom-control-label" for="__BVID__3122">Orange</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-2" autocomplete="off" class="custom-control-input" value="apple" id="__BVID__3123">
<label class="custom-control-label" for="__BVID__3123">Apple</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-2" autocomplete="off" class="custom-control-input" value="pineapple" id="__BVID__3124">
<label class="custom-control-label" for="__BVID__3124">Pineapple</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-2" autocomplete="off" class="custom-control-input" value="grape" id="__BVID__3125">
<label class="custom-control-label" for="__BVID__3125">Grape</label>
</div>
</div>
</div>
</fieldset>
<div>Selected: <strong>[]</strong></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Using options array:"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox-group-1"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-1"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Using sub-components:"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkbox-group-2"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"orange"</span>&gt;</span>Orange<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"apple"</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"pineapple"</span>&gt;</span>Pineapple<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"grape"</span>&gt;</span>Grape<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Selected: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ selected }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [], <span class="hljs-comment">// Must be an array reference!</span>
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Orange'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'orange'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Apple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'apple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Pineapple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'pineapple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Grape'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'grape'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>随意混合和匹配 <code translate="no" class="notranslate text-nowrap">options</code>【选项】属性和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 中的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 。手动放置的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 输入将显示在 <code translate="no" class="notranslate text-nowrap">options</code>【选项】属性生成的所有复选框输入 <em>下方</em> 。要使它们出现在 <code translate="no" class="notranslate text-nowrap">options</code>【选项】生成的输入<em>上方</em> ，请 <code translate="no" class="notranslate text-nowrap">first</code>【首先】将它们放在指定的槽中。</p>
<h2 id="checkbox-group-options-array" class="bv-no-focus-ring"><span class="bd-content-title">复选框组选项数组<a class="anchorjs-link" href="#checkbox-group-options-array" aria-labelledby="checkbox-group-options-array"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">options</code> 可以是字符串或对象的数组。可用字段：</p>
<ul>
<li><strong><code translate="no" class="notranslate text-nowrap">value</code></strong> 将在 <code translate="no" class="notranslate text-nowrap">v-model</code> 上设置的所选值</li>
<li><strong><code translate="no" class="notranslate text-nowrap">disabled</code></strong> 禁用的项目供选择</li>
<li><strong><code translate="no" class="notranslate text-nowrap">text</code></strong> 显示文本或 <strong><code translate="no" class="notranslate text-nowrap">html</code></strong> 显示基本的嵌入式 html</li>
</ul>
<p><code translate="no" class="notranslate text-nowrap">value</code> 可以是字符串，数字或简单对象。避免在值中使用复杂类型。</p>
<p>如果同时提供 <code translate="no" class="notranslate text-nowrap">html</code> 和 <code translate="no" class="notranslate text-nowrap">text</code> 则 <code translate="no" class="notranslate text-nowrap">html</code> 优先。<code translate="no" class="notranslate text-nowrap">html</code> 字段中仅支持基本/本机HTML（组件不起作用）。请注意，并非所有浏览器都会在 <code translate="no" class="notranslate text-nowrap">&lt;select&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">&lt;option&gt;</code> 元素内呈现内联html（即 <code translate="no" class="notranslate text-nowrap">&lt;i&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;strong&gt;</code> 等）。</p>
<p class="alert alert-danger"> <strong>请谨慎</strong> 将用户提供的内容放在 <code class="notranslate" translate="no">html</code> 字段中，因为如果不先 <a class="alert-link" href="https://en.wikipedia.org/wiki/HTML_sanitization">sanitize</a>【清理】用户提供的字符串，这可能会使您容易受到 <a class="alert-link" href="https://en.wikipedia.org/wiki/Cross-site_scripting"> <abbr title="Cross Site Scripting Attacks">XSS attacks</abbr></a>【XSS攻击】。</p>

<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> options = [<span class="hljs-string">'A'</span>, <span class="hljs-string">'B'</span>, <span class="hljs-string">'C'</span>, { <span class="hljs-attr">text</span>: <span class="hljs-string">'D'</span>, <span class="hljs-attr">value</span>: { <span class="hljs-attr">d</span>: <span class="hljs-number">1</span> }, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> }, <span class="hljs-string">'E'</span>, <span class="hljs-string">'F'</span>]</pre></figure>
<p>If an array entry is a string, it will be used for both the generated <code translate="no" class="notranslate text-nowrap">value</code> and <code translate="no" class="notranslate text-nowrap">text</code> fields.</p>
<p>You can mix using strings and <a href="#options-as-an-array-of-objects" class="font-weight-bold">objects</a> in the array.</p>
<p>Internally, BootstrapVue will convert the above array to the following array (the <a href="#options-as-an-array-of-objects" class="font-weight-bold">array of objects</a>) format:</p>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> options = [
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'A'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'A'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'B'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'B'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'C'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'C'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'D'</span>, <span class="hljs-attr">value</span>: { <span class="hljs-attr">d</span>: <span class="hljs-number">1</span> }, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'E'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'E'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'F'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'F'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> }
]</pre></figure>
<h3 id="options-as-an-array-of-objects" class="bv-no-focus-ring"><span class="bd-content-title">选项作为对象数组<a class="anchorjs-link" href="#options-as-an-array-of-objects" aria-labelledby="options-as-an-array-of-objects"></a></span></h3>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> options = [
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'first'</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 2'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'second'</span> },
  { <span class="hljs-attr">html</span>: <span class="hljs-string">'&lt;b&gt;Item&lt;/b&gt; 3'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'third'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 4'</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 5'</span>, <span class="hljs-attr">value</span>: { <span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">baz</span>: <span class="hljs-literal">true</span> } }
]</pre></figure>
<p>如果缺少 <code translate="no" class="notranslate text-nowrap">value</code> ，则 <code translate="no" class="notranslate text-nowrap">text</code> 将同时用作 <code translate="no" class="notranslate text-nowrap">value</code> 和 <code translate="no" class="notranslate text-nowrap">text</code> 字段。 如果使用 <code translate="no" class="notranslate text-nowrap">html</code> 属性，则 <strong>必须</strong> 提供 <code translate="no" class="notranslate text-nowrap">value</code> 属性。</p>
<p>在内部，BootstrapVue会将上面的数组转换为下面的数组（<a href="#options-as-an-array-of-objects" class="font-weight-bold">array of objects</a>【对象数组】）格式：</p>
<!-- eslint-disable no-unused-vars -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">const</span> options = [
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 1'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'first'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 2'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'second'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">html</span>: <span class="hljs-string">'&lt;b&gt;Item&lt;/b&gt; 3'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'third'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 4'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Item 4'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> },
  { <span class="hljs-attr">text</span>: <span class="hljs-string">'Item 5'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'E'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span> }
]</pre></figure>
<h3 id="changing-the-option-field-names" class="bv-no-focus-ring"><span class="bd-content-title">更改选项字段名称<a class="anchorjs-link" href="#changing-the-option-field-names" aria-labelledby="changing-the-option-field-names"></a></span></h3>
<p>如果要自定义字段属性名称（例如，使用 <code translate="no" class="notranslate text-nowrap">name</code> 字段显示 <code translate="no" class="notranslate text-nowrap">text</code> ），可以通过将 <code translate="no" class="notranslate text-nowrap">text-field</code> ，<code translate="no" class="notranslate text-nowrap">html-field</code> ，<code translate="no" class="notranslate text-nowrap">value-field</code> ，和 <code translate="no" class="notranslate text-nowrap">disabled-field</code> 属性设置为包含您想要使用的属性名的字符串来轻松地更改它们:</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-group-options-fields notranslate">
<div>
<div role="group" tabindex="-1" class="mb-3 bv-no-focus-ring" id="__BVID__3127">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="A" id="__BVID__3127__BV_option_0_" name="__BVID__3127">
<label class="custom-control-label" for="__BVID__3127__BV_option_0_"><span>Option A</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="B" id="__BVID__3127__BV_option_1_" name="__BVID__3127">
<label class="custom-control-label" for="__BVID__3127__BV_option_1_"><span>Option B</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" disabled="disabled" autocomplete="off" class="custom-control-input" value="D" id="__BVID__3127__BV_option_2_" name="__BVID__3127">
<label class="custom-control-label" for="__BVID__3127__BV_option_2_"><span>Option C</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="[object Object]" id="__BVID__3127__BV_option_3_" name="__BVID__3127">
<label class="custom-control-label" for="__BVID__3127__BV_option_3_"><span>Option D</span></label>
</div>
</div>
<div class="mt-3">Selected: <strong>[]</strong></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
      <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>
      <span class="hljs-attr">value-field</span>=<span class="hljs-string">"item"</span>
      <span class="hljs-attr">text-field</span>=<span class="hljs-string">"name"</span>
      <span class="hljs-attr">disabled-field</span>=<span class="hljs-string">"notEnabled"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>Selected: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ selected }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [],
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">item</span>: <span class="hljs-string">'A'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'Option A'</span> },
          { <span class="hljs-attr">item</span>: <span class="hljs-string">'B'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'Option B'</span> },
          { <span class="hljs-attr">item</span>: <span class="hljs-string">'D'</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">'Option C'</span>, <span class="hljs-attr">notEnabled</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">item</span>: { <span class="hljs-attr">d</span>: <span class="hljs-number">1</span> }, <span class="hljs-attr">name</span>: <span class="hljs-string">'Option D'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="inline-and-stacked-checkboxes" class="bv-no-focus-ring"><span class="bd-content-title">内联和堆叠复选框<a class="anchorjs-link" href="#inline-and-stacked-checkboxes" aria-labelledby="inline-and-stacked-checkboxes"></a></span></h2>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 组件呈现嵌入式复选框，而 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 呈现块级（堆叠）复选框。</p>
<p>设置 <code translate="no" class="notranslate text-nowrap">stacked</code>【叠放】 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 上的属性，以将每个表单控件彼此放置在一起；或者，如果使用不在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 内的单个复选框，则将 <code translate="no" class="notranslate text-nowrap">inline</code>【内联】属性设置在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-stacked notranslate">
<div>
<fieldset class="form-group" id="__BVID__3133">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3133__BV_label_">Form-checkbox-group inline checkboxes (default)</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3134">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-1a" autocomplete="off" class="custom-control-input" value="orange" id="__BVID__3134__BV_option_0_">
<label class="custom-control-label" for="__BVID__3134__BV_option_0_"><span>Orange</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-1a" autocomplete="off" class="custom-control-input" value="apple" id="__BVID__3134__BV_option_1_">
<label class="custom-control-label" for="__BVID__3134__BV_option_1_"><span>Apple</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-1a" autocomplete="off" class="custom-control-input" value="pineapple" id="__BVID__3134__BV_option_2_">
<label class="custom-control-label" for="__BVID__3134__BV_option_2_"><span>Pineapple</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-1a" autocomplete="off" class="custom-control-input" value="grape" id="__BVID__3134__BV_option_3_">
<label class="custom-control-label" for="__BVID__3134__BV_option_3_"><span>Grape</span></label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3139">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3139__BV_label_">Form-checkbox-group stacked checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3140">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-2a" autocomplete="off" class="custom-control-input" value="orange" id="__BVID__3140__BV_option_0_">
<label class="custom-control-label" for="__BVID__3140__BV_option_0_"><span>Orange</span></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-2a" autocomplete="off" class="custom-control-input" value="apple" id="__BVID__3140__BV_option_1_">
<label class="custom-control-label" for="__BVID__3140__BV_option_1_"><span>Apple</span></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-2a" autocomplete="off" class="custom-control-input" value="pineapple" id="__BVID__3140__BV_option_2_">
<label class="custom-control-label" for="__BVID__3140__BV_option_2_"><span>Pineapple</span></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-2a" autocomplete="off" class="custom-control-input" value="grape" id="__BVID__3140__BV_option_3_">
<label class="custom-control-label" for="__BVID__3140__BV_option_3_"><span>Grape</span></label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3145">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3145__BV_label_">Individual stacked checkboxes (default)</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-3a" autocomplete="off" class="custom-control-input" value="orange" id="__BVID__3146">
<label class="custom-control-label" for="__BVID__3146"> Orange </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-3a" autocomplete="off" class="custom-control-input" value="apple" id="__BVID__3147">
<label class="custom-control-label" for="__BVID__3147"> Apple </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-3a" autocomplete="off" class="custom-control-input" value="pineapple" id="__BVID__3148">
<label class="custom-control-label" for="__BVID__3148"> Pineapple </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="flavour-3a" autocomplete="off" class="custom-control-input" value="grape" id="__BVID__3149">
<label class="custom-control-label" for="__BVID__3149"> Grape </label>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3150">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3150__BV_label_">Individual inline checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-4a" autocomplete="off" class="custom-control-input" value="orange" id="__BVID__3151">
<label class="custom-control-label" for="__BVID__3151"> Orange </label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-4a" autocomplete="off" class="custom-control-input" value="apple" id="__BVID__3152">
<label class="custom-control-label" for="__BVID__3152"> Apple </label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-4a" autocomplete="off" class="custom-control-input" value="pineapple" id="__BVID__3153">
<label class="custom-control-label" for="__BVID__3153"> Pineapple </label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="flavour-4a" autocomplete="off" class="custom-control-input" value="grape" id="__BVID__3154">
<label class="custom-control-label" for="__BVID__3154"> Grape </label>
</div>
</div>
</fieldset>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Form-checkbox-group inline checkboxes (default)"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-1a"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Form-checkbox-group stacked checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-2a"</span>
        <span class="hljs-attr">stacked</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Individual stacked checkboxes (default)"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span>
        <span class="hljs-attr">v-for</span>=<span class="hljs-string">"option in options"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:key</span>=<span class="hljs-string">"option.value"</span>
        <span class="hljs-attr">:value</span>=<span class="hljs-string">"option.value"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-3a"</span>
      &gt;</span>
        {{ option.text }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Individual inline checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span>
        <span class="hljs-attr">v-for</span>=<span class="hljs-string">"option in options"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:key</span>=<span class="hljs-string">"option.value"</span>
        <span class="hljs-attr">:value</span>=<span class="hljs-string">"option.value"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavour-4a"</span>
        <span class="hljs-attr">inline</span>
      &gt;</span>
        {{ option.text }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [], <span class="hljs-comment">// Must be an array reference!</span>
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Orange'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'orange'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Apple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'apple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Pineapple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'pineapple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Grape'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'grape'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="control-sizing" class="bv-no-focus-ring"><span class="bd-content-title">控制尺寸<a class="anchorjs-link" href="#control-sizing" aria-labelledby="control-sizing"></a></span></h2>
<p>使用 <code translate="no" class="notranslate text-nowrap">size</code> 属性控制复选框的大小。 默认大小为中。 支持的大小值为 <code translate="no" class="notranslate text-nowrap">sm</code>（小）和 <code translate="no" class="notranslate text-nowrap">lg</code>（大）。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-checkbox-sizes notranslate">
<div>
<div class="custom-control custom-checkbox b-custom-control-sm">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3156">
<label class="custom-control-label" for="__BVID__3156">Small</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3157">
<label class="custom-control-label" for="__BVID__3157">Default</label>
</div>
<div class="custom-control custom-checkbox b-custom-control-lg">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3158">
<label class="custom-control-label" for="__BVID__3158">Large</label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>可以在各个 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 组件上设置大小，也可以继承 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 的大小设置。</p>
<p><strong>注意：</strong> Bootstrap v4.x 本身不支持自定义复选框控件的大小。但是，BootstrapVue 包含自定义SCSS / CSS，它增加了对自定义复选框的大小的支持。</p>
<h2 id="checkbox-values-and-v-model" class="bv-no-focus-ring"><span class="bd-content-title">复选框值和 <code translate="no" class="notranslate text-nowrap">v-model</code><a class="anchorjs-link" href="#checkbox-values-and-v-model" aria-labelledby="checkbox-values-and-v-model"></a></span></h2>
<p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 值在选中时为 <code translate="no" class="notranslate text-nowrap">true</code> ，在未选中时为 <code translate="no" class="notranslate text-nowrap">false</code> 。您可以通过分别指定 <code translate="no" class="notranslate text-nowrap">value</code> 和 <code translate="no" class="notranslate text-nowrap">unchecked-value</code> 属性来定制检查和未检查的值。</p>
<p><code translate="no" class="notranslate text-nowrap">v-model</code> 绑定到 <code translate="no" class="notranslate text-nowrap">checked</code>【检查】的属性。 当具有绑定到单个数据状态变量的多个复选框时，<strong>必须</strong> 为 <code translate="no" class="notranslate text-nowrap">v-model</code> 提供数组引用（ <code translate="no" class="notranslate text-nowrap">[]</code> ）请勿直接使用 <code translate="no" class="notranslate text-nowrap">checked</code> 的属性。</p>
<p>注意，当 <code translate="no" class="notranslate text-nowrap">v-model</code> 绑定到多个复选框（即数组引用）时，<strong>不使用</strong> <code translate="no" class="notranslate text-nowrap">unchecked-value</code> 。在 <code translate="no" class="notranslate text-nowrap">v-model</code> 绑定数组中只返回选中复选框的值。您应该为每个复选框的值属性提供唯一的 <code translate="no" class="notranslate text-nowrap">value</code>（当绑定到数组时，默认值 <code translate="no" class="notranslate text-nowrap">true</code> 不起作用） </p>
<p>要预先检查所有音频，请将 <code translate="no" class="notranslate text-nowrap">v-model</code> 设置为您要预先选择的检查值。</p>
<p>当将单个 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 组件放置在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 中时，大多数属性和 <code translate="no" class="notranslate text-nowrap">v-model</code> 都继承自 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 。</p>
<p><strong>注意：</strong> <code translate="no" class="notranslate text-nowrap">unchecked-value</code> 属性 <em>不会</em> 影响本机 <code translate="no" class="notranslate text-nowrap">&lt;input&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">value</code> 属性，因为浏览器在表单提交中不包括未选中的框。 为确保在本地 <code translate="no" class="notranslate text-nowrap">&lt;form&gt;</code> 提交中提交两个值之一（例如，“<code translate="no" class="notranslate text-nowrap">'yes'</code>”或“<code translate="no" class="notranslate text-nowrap">'no'</code>”），请改用单选输入。 这与 <a href="https://vuejs.org/v2/guide/forms.html#Checkbox-1" target="_blank" rel="noopener">Vue has with native checkbox inputs</a>【Vue对本机复选框输入】的限制相同。</p>
<h3 id="multiple-checkboxes-and-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">多个复选框和可访问性<a class="anchorjs-link" href="#multiple-checkboxes-and-accessibility" aria-labelledby="multiple-checkboxes-and-accessibility"></a></span></h3>
<p>将多个复选框绑定在一起时，必须将组中所有 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置为相同的值，或者通过 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">name</code> 属性设置。 这将通知辅助技术用户复选框相关，并启用本机浏览器键盘导航。</p>
<p>每当使用多个复选框时，建议将复选框放置在 <a href="../../../bootstrap-vue/docs/components/form-group" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code></a> 组件中，以将标签与整个复选框组相关联。请参阅上面的示例。</p>
<h2 id="button-style-checkboxes" class="bv-no-focus-ring"><span class="bd-content-title">按钮样式复选框<a class="anchorjs-link" href="#button-style-checkboxes" aria-labelledby="button-style-checkboxes"></a></span></h2>
<p>您可以选择使复选框单独或成组显示为按钮。</p>
<p>按钮样式复选框处于 <em>选中</em> 状态时，将自动将 <code translate="no" class="notranslate text-nowrap">.active</code> 类应用于标签。</p>
<h3 id="individual-checkbox-button-style" class="bv-no-focus-ring"><span class="bd-content-title">单个复选框按钮样式<a class="anchorjs-link" href="#individual-checkbox-button-style" aria-labelledby="individual-checkbox-button-style"></a></span></h3>
<p>通过将 <code translate="no" class="notranslate text-nowrap">button</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，可以使用按钮外观呈现单个复选框</p>
<p>通过将 <code translate="no" class="notranslate text-nowrap">button-variant</code> 属性设置为标准Bootstrap按钮变量之一来更改按钮变量（有关受支持的变量，请参见 <a href="../../../bootstrap-vue/docs/components/button" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code></a> ）。 默认变量是 <code translate="no" class="notranslate text-nowrap">secondary</code>【次要】变量。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-button notranslate">
<div>
<div class="btn-group-toggle d-inline-block">
<label class="btn btn-secondary">
<input type="checkbox" name="check-button" autocomplete="off" class="" value="true" id="__BVID__3160">
Button Checkbox <b>(Checked: false)</b></label>
</div>
<div class="btn-group-toggle d-inline-block">
<label class="btn btn-info">
<input type="checkbox" name="check-button" autocomplete="off" class="" value="true" id="__BVID__3161">
Button Checkbox <b>(Checked: false)</b></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check-button"</span> <span class="hljs-attr">button</span>&gt;</span>
      Button Checkbox <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>(Checked: {{ checked1 }})<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check-button"</span> <span class="hljs-attr">button</span> <span class="hljs-attr">button-variant</span>=<span class="hljs-string">"info"</span>&gt;</span>
      Button Checkbox <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>(Checked: {{ checked2 }})<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">checked1</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">checked2</span>: <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><code translate="no" class="notranslate text-nowrap">inline</code> 【内嵌】属性对单个按钮样式的复选框无效。</p>
<h3 id="grouped-button-style-checkboxes" class="bv-no-focus-ring"><span class="bd-content-title">分组按钮样式复选框<a class="anchorjs-link" href="#grouped-button-style-checkboxes" aria-labelledby="grouped-button-style-checkboxes"></a></span></h3>
<p>通过在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 上设置 <code translate="no" class="notranslate text-nowrap">buttons</code> 属性，以按钮组的外观呈现复选框组。 通过将 <code translate="no" class="notranslate text-nowrap">button-variant</code> 属性设置为标准 Bootstrap 按钮变量之一来更改按钮变量（有关受支持的变量，请参见 <a href="../../../bootstrap-vue/docs/components/button" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code></a> ）。默认的 <code translate="no" class="notranslate text-nowrap">button-variant</code> 为 <code translate="no" class="notranslate text-nowrap">secondary</code>【次要】按钮。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-button-group notranslate">
<div>
<fieldset class="form-group" id="__BVID__3163">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3163__BV_label_">Button-group style checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="btn-group-toggle btn-group bv-no-focus-ring" id="__BVID__3164">
<label class="btn btn-secondary">
<input type="checkbox" name="buttons-1" autocomplete="off" class="" value="orange" id="__BVID__3164__BV_option_0_">
<span>Orange</span></label>
<label class="btn btn-secondary">
<input type="checkbox" name="buttons-1" autocomplete="off" class="" value="apple" id="__BVID__3164__BV_option_1_">
<span>Apple</span></label>
<label class="btn btn-secondary">
<input type="checkbox" name="buttons-1" autocomplete="off" class="" value="pineapple" id="__BVID__3164__BV_option_2_">
<span>Pineapple</span></label>
<label class="btn btn-secondary">
<input type="checkbox" name="buttons-1" autocomplete="off" class="" value="grape" id="__BVID__3164__BV_option_3_">
<span>Grape</span></label>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3169">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3169__BV_label_">Button-group style checkboxes with variant primary and large buttons</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="btn-group-toggle btn-group btn-group-lg bv-no-focus-ring" id="__BVID__3170">
<label class="btn btn-primary btn-lg">
<input type="checkbox" name="buttons-2" autocomplete="off" class="" value="orange" id="__BVID__3170__BV_option_0_">
<span>Orange</span></label>
<label class="btn btn-primary btn-lg">
<input type="checkbox" name="buttons-2" autocomplete="off" class="" value="apple" id="__BVID__3170__BV_option_1_">
<span>Apple</span></label>
<label class="btn btn-primary btn-lg">
<input type="checkbox" name="buttons-2" autocomplete="off" class="" value="pineapple" id="__BVID__3170__BV_option_2_">
<span>Pineapple</span></label>
<label class="btn btn-primary btn-lg">
<input type="checkbox" name="buttons-2" autocomplete="off" class="" value="grape" id="__BVID__3170__BV_option_3_">
<span>Grape</span></label>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3175">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3175__BV_label_">Stacked (vertical) button-group style checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="btn-group-toggle btn-group-vertical bv-no-focus-ring" id="__BVID__3176">
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" class="" value="orange" id="__BVID__3176__BV_option_0_" name="__BVID__3176">
<span>Orange</span></label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" class="" value="apple" id="__BVID__3176__BV_option_1_" name="__BVID__3176">
<span>Apple</span></label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" class="" value="pineapple" id="__BVID__3176__BV_option_2_" name="__BVID__3176">
<span>Pineapple</span></label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" class="" value="grape" id="__BVID__3176__BV_option_3_" name="__BVID__3176">
<span>Grape</span></label>
</div>
</div>
</fieldset>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Button-group style checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"buttons-1"</span>
        <span class="hljs-attr">buttons</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Button-group style checkboxes with variant primary and large buttons"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">buttons</span>
        <span class="hljs-attr">button-variant</span>=<span class="hljs-string">"primary"</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"buttons-2"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Stacked (vertical) button-group style checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">stacked</span>
        <span class="hljs-attr">buttons</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [], <span class="hljs-comment">// Must be an array reference!</span>
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Orange'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'orange'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Apple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'apple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Pineapple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'pineapple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Grape'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'grape'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="switch-style-checkboxes" class="bv-no-focus-ring"><span class="bd-content-title">切换样式复选框<a class="anchorjs-link" href="#switch-style-checkboxes" aria-labelledby="switch-style-checkboxes"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 组件支持开关样式。</p>
<p><strong>注意：</strong> 如果复选框处于 <a href="#button-style-checkboxes" class="font-weight-bold">button mode</a>【按钮模式】，则切换模式将无效。</p>
<h3 id="individual-checkbox-switch-style" class="bv-no-focus-ring"><span class="bd-content-title">单独的复选框开关样式<a class="anchorjs-link" href="#individual-checkbox-switch-style" aria-labelledby="individual-checkbox-switch-style"></a></span></h3>
<p>通过将 <code translate="no" class="notranslate text-nowrap">switch</code>【开关】属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，可以使用开关外观呈现单个复选框。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-switch notranslate">
<div>
<div class="custom-control custom-switch">
<input type="checkbox" name="check-button" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3182">
<label class="custom-control-label" for="__BVID__3182"> Switch Checkbox <b>(Checked: false)</b></label>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"check-button"</span> <span class="hljs-attr">switch</span>&gt;</span>
      Switch Checkbox <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>(Checked: {{ checked }})<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="grouped-switch-style-checkboxes" class="bv-no-focus-ring"><span class="bd-content-title">分组开关样式复选框<a class="anchorjs-link" href="#grouped-switch-style-checkboxes" aria-labelledby="grouped-switch-style-checkboxes"></a></span></h3>
<p>通过在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 上设置 <code translate="no" class="notranslate text-nowrap">switches</code>【开关】属性，以开关的外观呈现复选框组。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkboxes-switch-group notranslate">
<div>
<fieldset class="form-group" id="__BVID__3184">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3184__BV_label_">Inline switch style checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3185">
<div class="custom-control custom-control-inline custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="red" id="__BVID__3185__BV_option_0_" name="__BVID__3185">
<label class="custom-control-label" for="__BVID__3185__BV_option_0_"><span>Red</span></label>
</div>
<div class="custom-control custom-control-inline custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="green" id="__BVID__3185__BV_option_1_" name="__BVID__3185">
<label class="custom-control-label" for="__BVID__3185__BV_option_1_"><span>Green</span></label>
</div>
<div class="custom-control custom-control-inline custom-switch">
<input type="checkbox" disabled="disabled" autocomplete="off" class="custom-control-input" value="yellow" id="__BVID__3185__BV_option_2_" name="__BVID__3185">
<label class="custom-control-label" for="__BVID__3185__BV_option_2_"><span>Yellow (disabled)</span></label>
</div>
<div class="custom-control custom-control-inline custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="blue" id="__BVID__3185__BV_option_3_" name="__BVID__3185">
<label class="custom-control-label" for="__BVID__3185__BV_option_3_"><span>Blue</span></label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3190">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3190__BV_label_">Stacked (vertical) switch style checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3191">
<div class="custom-control custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="red" id="__BVID__3191__BV_option_0_" name="__BVID__3191">
<label class="custom-control-label" for="__BVID__3191__BV_option_0_"><span>Red</span></label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="green" id="__BVID__3191__BV_option_1_" name="__BVID__3191">
<label class="custom-control-label" for="__BVID__3191__BV_option_1_"><span>Green</span></label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" disabled="disabled" autocomplete="off" class="custom-control-input" value="yellow" id="__BVID__3191__BV_option_2_" name="__BVID__3191">
<label class="custom-control-label" for="__BVID__3191__BV_option_2_"><span>Yellow (disabled)</span></label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="blue" id="__BVID__3191__BV_option_3_" name="__BVID__3191">
<label class="custom-control-label" for="__BVID__3191__BV_option_3_"><span>Blue</span></label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Inline switch style checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">switches</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Stacked (vertical) switch style checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">switches</span>
        <span class="hljs-attr">stacked</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [], <span class="hljs-comment">// Must be an array reference!</span>
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Red'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'red'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Green'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'green'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Yellow (disabled)'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'yellow'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Blue'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'blue'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="switch-sizing" class="bv-no-focus-ring"><span class="bd-content-title">开关尺寸<a class="anchorjs-link" href="#switch-sizing" aria-labelledby="switch-sizing"></a></span></h3>
<p>使用 <code translate="no" class="notranslate text-nowrap">size</code> 属性控制开关的大小。 默认大小为中。 支持的大小值为 <code translate="no" class="notranslate text-nowrap">sm</code>（小）和 <code translate="no" class="notranslate text-nowrap">lg</code>（大）。</p>
<div translate="translate" class="bd-example vue-example vue-example-form-checkbox-switch-sizes notranslate">
<div>
<div class="custom-control custom-switch b-custom-control-sm">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3197">
<label class="custom-control-label" for="__BVID__3197">Small</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3198">
<label class="custom-control-label" for="__BVID__3198">Default</label>
</div>
<div class="custom-control custom-switch b-custom-control-lg">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3199">
<label class="custom-control-label" for="__BVID__3199">Large</label>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">switch</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">switch</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">switch</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>可以在各个 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 组件上设置大小，也可以继承 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 的大小设置。</p>
<p><strong>注意：</strong> Bootstrap v4.x 本身不支持自定义开关控件的大小。但是，BootstrapVue 包含自定义 SCSS / CSS，它增加了对自定义开关的大小支持。</p>
<h2 id="non-custom-check-inputs-plain" class="bv-no-focus-ring"><span class="bd-content-title">非定制检查输入（纯文本）<a class="anchorjs-link" href="#non-custom-check-inputs-plain" aria-labelledby="non-custom-check-inputs-plain"></a></span></h2>
<p>您可以通过设置 <code translate="no" class="notranslate text-nowrap">plain</code> 属性使 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 或 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 呈现浏览器本机复选框输入。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-plain notranslate">
<div>
<fieldset class="form-group" id="__BVID__3201">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3201__BV_label_">Plain inline checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3202">
<div class="form-check form-check-inline">
<input type="checkbox" autocomplete="off" class="form-check-input" value="orange" id="__BVID__3202__BV_option_0_" name="__BVID__3202">
<label class="form-check-label" for="__BVID__3202__BV_option_0_"><span>Orange</span></label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" autocomplete="off" class="form-check-input" value="apple" id="__BVID__3202__BV_option_1_" name="__BVID__3202">
<label class="form-check-label" for="__BVID__3202__BV_option_1_"><span>Apple</span></label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" autocomplete="off" class="form-check-input" value="pineapple" id="__BVID__3202__BV_option_2_" name="__BVID__3202">
<label class="form-check-label" for="__BVID__3202__BV_option_2_"><span>Pineapple</span></label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" autocomplete="off" class="form-check-input" value="grape" id="__BVID__3202__BV_option_3_" name="__BVID__3202">
<label class="form-check-label" for="__BVID__3202__BV_option_3_"><span>Grape</span></label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" id="__BVID__3207">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3207__BV_label_">Plain stacked checkboxes</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="group" tabindex="-1" class="bv-no-focus-ring" id="__BVID__3208">
<div class="form-check">
<input type="checkbox" autocomplete="off" class="form-check-input" value="orange" id="__BVID__3208__BV_option_0_" name="__BVID__3208">
<label class="form-check-label" for="__BVID__3208__BV_option_0_"><span>Orange</span></label>
</div>
<div class="form-check">
<input type="checkbox" autocomplete="off" class="form-check-input" value="apple" id="__BVID__3208__BV_option_1_" name="__BVID__3208">
<label class="form-check-label" for="__BVID__3208__BV_option_1_"><span>Apple</span></label>
</div>
<div class="form-check">
<input type="checkbox" autocomplete="off" class="form-check-input" value="pineapple" id="__BVID__3208__BV_option_2_" name="__BVID__3208">
<label class="form-check-label" for="__BVID__3208__BV_option_2_"><span>Pineapple</span></label>
</div>
<div class="form-check">
<input type="checkbox" autocomplete="off" class="form-check-input" value="grape" id="__BVID__3208__BV_option_3_" name="__BVID__3208">
<label class="form-check-label" for="__BVID__3208__BV_option_3_"><span>Grape</span></label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Plain inline checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">plain</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Plain stacked checkboxes"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
        <span class="hljs-attr">plain</span>
        <span class="hljs-attr">stacked</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">selected</span>: [], <span class="hljs-comment">// Must be an array reference!</span>
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Orange'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'orange'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Apple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'apple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Pineapple'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'pineapple'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Grape'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'grape'</span> }
        ]
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意：</strong> 当设置一个 <code translate="no" class="notranslate text-nowrap">button</code> 或多个 <code translate="no" class="notranslate text-nowrap">button</code> 时，<code translate="no" class="notranslate text-nowrap">plain</code> 属性无效。</p>
<h2 id="contextual-states" class="bv-no-focus-ring"><span class="bd-content-title">上下文状态<a class="anchorjs-link" href="#contextual-states" aria-labelledby="contextual-states"></a></span></h2>
<p>Bootstrap 包括大多数表单控件上 <code translate="no" class="notranslate text-nowrap">valid</code>【有效】和 <code translate="no" class="notranslate text-nowrap">invalid</code>【无效】状态的验证样式。</p>
<p>一般来说，您需要针对特定类型的反馈使用特定状态：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">false</code>（表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。</li>
<li><code translate="no" class="notranslate text-nowrap">true</code>（表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。</li>
<li><code translate="no" class="notranslate text-nowrap">null</code> 不显示验证状态（既不有效也不无效）</li>
</ul>
<p>要在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 上应用上下文状态图标之一，请将 <code translate="no" class="notranslate text-nowrap">state</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">false</code>（对于无效），<code translate="no" class="notranslate text-nowrap">true</code>（对于有效）或 <code translate="no" class="notranslate text-nowrap">null</code>（无验证状态）。</p>
<p><strong>注意：</strong> 在按钮模式下，<strong>不</strong> 支持上下文状态。</p>
<h3 id="contextual-state-and-validation-example" class="bv-no-focus-ring"><span class="bd-content-title">上下文状态和验证示例<a class="anchorjs-link" href="#contextual-state-and-validation-example" aria-labelledby="contextual-state-and-validation-example"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-form-checkbox-validation notranslate">
<div>
<div role="group" tabindex="-1" aria-invalid="true" class="bv-no-focus-ring" id="__BVID__3214">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="checkbox-validation" autocomplete="off" class="custom-control-input is-invalid" value="first" id="__BVID__3214__BV_option_0_">
<label class="custom-control-label" for="__BVID__3214__BV_option_0_"><span>First Check</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="checkbox-validation" autocomplete="off" class="custom-control-input is-invalid" value="second" id="__BVID__3214__BV_option_1_">
<label class="custom-control-label" for="__BVID__3214__BV_option_1_"><span>Second Check</span></label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="checkbox-validation" autocomplete="off" class="custom-control-input is-invalid" value="third" id="__BVID__3214__BV_option_2_">
<label class="custom-control-label" for="__BVID__3214__BV_option_2_"><span>Third Check</span></label>
</div>
<div class="invalid-feedback d-block">Please select two</div>
<div class="valid-feedback">Thank you</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
      <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
      <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>
      <span class="hljs-attr">name</span>=<span class="hljs-string">"checkbox-validation"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-invalid-feedback</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>&gt;</span>Please select two<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-invalid-feedback</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-valid-feedback</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>&gt;</span>Thank you<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-valid-feedback</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: [],
        <span class="hljs-attr">options</span>: [
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'First Check'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'first'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Second Check'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'second'</span> },
          { <span class="hljs-attr">text</span>: <span class="hljs-string">'Third Check'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'third'</span> }
        ]
      }
    },
    <span class="hljs-attr">computed</span>: {
      state() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.value.length === <span class="hljs-number">2</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="required-constraint" class="bv-no-focus-ring"><span class="bd-content-title">所需约束<a class="anchorjs-link" href="#required-constraint" aria-labelledby="required-constraint"></a></span></h3>
<p>当使用单独的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 组件(不在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code>中)，并且希望表单中 <code translate="no" class="notranslate text-nowrap">required</code>【需要】复选框时，<strong>必须</strong> 在每个 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 上提供一个 <code translate="no" class="notranslate text-nowrap">name</code>【名称】，以便所需的约束能够工作。所有绑定到相同 <code translate="no" class="notranslate text-nowrap">v-model</code> 的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 组件 <strong>必须</strong> 具有相同的 <code translate="no" class="notranslate text-nowrap">name</code>【名称】。</p>
<p>所需的 <code translate="no" class="notranslate text-nowrap">name</code>【名称】是为了辅助技术(如屏幕阅读器和键盘只有用户)知道该复选框属于同一形式变量(这个名字会自动使本机浏览器键盘导航),因此 <code translate="no" class="notranslate text-nowrap">required</code>【需要】将只工作如果 <code translate="no" class="notranslate text-nowrap">name</code>【名称】是组。<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 将自动生成一个唯一的输入名称如果没有提供。</p>
<h2 id="autofocus" class="bv-no-focus-ring"><span class="bd-content-title">自动聚焦<a class="anchorjs-link" href="#autofocus" aria-labelledby="autofocus"></a></span></h2>
<p>当将 <code translate="no" class="notranslate text-nowrap">autofocus</code>【自动对焦】属性设置为 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 时，输入将在插入（即 <strong>mounted</strong>【安装】）到文档中时自动对焦，或者在Vue <code translate="no" class="notranslate text-nowrap">&lt;keep-alive&gt;</code> 组件内部重新激活。 请注意，此道具 <strong>不会</strong> 在输入上设置 <code translate="no" class="notranslate text-nowrap">autofocus</code>【自动对焦】属性，也无法告诉输入何时可见。</p>
<h2 id="indeterminate-tri-state-support" class="bv-no-focus-ring"><span class="bd-content-title">不确定（三态）支持<a class="anchorjs-link" href="#indeterminate-tri-state-support" aria-labelledby="indeterminate-tri-state-support"></a></span></h2>
<p>通常，复选框输入只能具有两种状态：<em>checked</em>【选中】或 <em>unchecked</em>【未选中】。 它们可以具有任何值，但是他们可以通过表单提交来提交（<em>checked</em>【选中】）或不提交（<em>unchecked</em>【取消选中】）该值（尽管 BootstrapVue 在单个复选框上允许 <em>unchecked</em>【未选中】状态的值）</p>
<p>从 <em>视觉</em> 上看，复选框实际上有三种状态：<em>checked</em>【选中】、<em>unchecked</em>【未选中】或 <strong><em>indeterminate</em></strong>【不确定】。</p>
<p><em>indeterminate</em>【不确定】状态 <strong>仅是可见</strong> 的。该复选框仍被选中或未选中为值。这意味着视觉上不确定的状态掩盖了复选框的真实用处，从而使UI更有意义！</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 支持通过 <code translate="no" class="notranslate text-nowrap">indeterminate</code>【不确定】属性设置此视觉不确定状态（默认为 <code translate="no" class="notranslate text-nowrap">false</code> ）。 单击复选框将清除其不确定状态。 通过使用 <code translate="no" class="notranslate text-nowrap">.sync</code> 修饰符 v-binding【绑定】 <code translate="no" class="notranslate text-nowrap">indeterminate</code>【不确定】的属性，可以将 <code translate="no" class="notranslate text-nowrap">indeterminate</code>【不确定】的属性同步到复选框的状态。</p>
<p><strong>注意：</strong> 按钮或切换模式不支持不确定的样式，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code>（多个复选框）也不支持不确定的样式。</p>
<p><strong>单个不确定复选框：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-indeterminate notranslate">
<div>
<div class="custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3219">
<label class="custom-control-label" for="__BVID__3219"> Click me to see what happens </label>
</div>
<div class="mt-3"> Checked: <strong>true</strong><br>
Indeterminate: <strong>true</strong></div>
<button type="button" class="btn btn-secondary">Toggle Indeterminate State</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span> <span class="hljs-attr">:indeterminate.sync</span>=<span class="hljs-string">"indeterminate"</span>&gt;</span>
      Click me to see what happens
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      Checked: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ checked }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
      Indeterminate: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ indeterminate }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toggleIndeterminate"</span>&gt;</span>Toggle Indeterminate State<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">indeterminate</span>: <span class="hljs-literal">true</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      toggleIndeterminate() {
        <span class="hljs-keyword">this</span>.indeterminate = !<span class="hljs-keyword">this</span>.indeterminate
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>不确定的复选框 use-case【使用案例】示例：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-checkbox-indeterminate-multiple notranslate">
<div>
<fieldset class="form-group" id="__BVID__3221">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__3221__BV_label_">
<b>Choose your flavours:</b><br>
<div class="custom-control custom-checkbox">
<input aria-describedby="flavours" aria-controls="flavours" type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__3222">
<label class="custom-control-label" for="__BVID__3222"> Select All </label>
</div>
</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div id="flavors" role="group" tabindex="-1" class="ml-4 bv-no-focus-ring" aria-label="Individual flavours">
<div class="custom-control custom-checkbox">
<input id="flavors__BV_option_0_" type="checkbox" name="flavors" autocomplete="off" class="custom-control-input" value="Orange">
<label for="flavors__BV_option_0_" class="custom-control-label"><span>Orange</span></label>
</div>
<div class="custom-control custom-checkbox">
<input id="flavors__BV_option_1_" type="checkbox" name="flavors" autocomplete="off" class="custom-control-input" value="Grape">
<label for="flavors__BV_option_1_" class="custom-control-label"><span>Grape</span></label>
</div>
<div class="custom-control custom-checkbox">
<input id="flavors__BV_option_2_" type="checkbox" name="flavors" autocomplete="off" class="custom-control-input" value="Apple">
<label for="flavors__BV_option_2_" class="custom-control-label"><span>Apple</span></label>
</div>
<div class="custom-control custom-checkbox">
<input id="flavors__BV_option_3_" type="checkbox" name="flavors" autocomplete="off" class="custom-control-input" value="Lime">
<label for="flavors__BV_option_3_" class="custom-control-label"><span>Lime</span></label>
</div>
<div class="custom-control custom-checkbox">
<input id="flavors__BV_option_4_" type="checkbox" name="flavors" autocomplete="off" class="custom-control-input" value="Very Berry">
<label for="flavors__BV_option_4_" class="custom-control-label"><span>Very Berry</span></label>
</div>
</div>
</div>
</fieldset>
<div> Selected: <strong>[]</strong><br>
All Selected: <strong>false</strong><br>
Indeterminate: <strong>false</strong></div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:label</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Choose your flavours:<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span>
          <span class="hljs-attr">v-model</span>=<span class="hljs-string">"allSelected"</span>
          <span class="hljs-attr">:indeterminate</span>=<span class="hljs-string">"indeterminate"</span>
          <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"flavours"</span>
          <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"flavours"</span>
          @<span class="hljs-attr">change</span>=<span class="hljs-string">"toggleAll"</span>
        &gt;</span>
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"flavors"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>
        <span class="hljs-attr">:options</span>=<span class="hljs-string">"flavours"</span>
        <span class="hljs-attr">name</span>=<span class="hljs-string">"flavors"</span>
        <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-4"</span>
        <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Individual flavours"</span>
        <span class="hljs-attr">stacked</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      Selected: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ selected }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
      All Selected: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ allSelected }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
      Indeterminate: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ indeterminate }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">flavours</span>: [<span class="hljs-string">'Orange'</span>, <span class="hljs-string">'Grape'</span>, <span class="hljs-string">'Apple'</span>, <span class="hljs-string">'Lime'</span>, <span class="hljs-string">'Very Berry'</span>],
        <span class="hljs-attr">selected</span>: [],
        <span class="hljs-attr">allSelected</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">indeterminate</span>: <span class="hljs-literal">false</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      toggleAll(checked) {
        <span class="hljs-keyword">this</span>.selected = checked ? <span class="hljs-keyword">this</span>.flavours.slice() : []
      }
    },
    <span class="hljs-attr">watch</span>: {
      selected(newVal, oldVal) {
        <span class="hljs-comment">// Handle changes in individual flavour checkboxes</span>
        <span class="hljs-keyword">if</span> (newVal.length === <span class="hljs-number">0</span>) {
          <span class="hljs-keyword">this</span>.indeterminate = <span class="hljs-literal">false</span>
          <span class="hljs-keyword">this</span>.allSelected = <span class="hljs-literal">false</span>
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (newVal.length === <span class="hljs-keyword">this</span>.flavours.length) {
          <span class="hljs-keyword">this</span>.indeterminate = <span class="hljs-literal">false</span>
          <span class="hljs-keyword">this</span>.allSelected = <span class="hljs-literal">true</span>
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">this</span>.indeterminate = <span class="hljs-literal">true</span>
          <span class="hljs-keyword">this</span>.allSelected = <span class="hljs-literal">false</span>
        }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意：</strong> <code translate="no" class="notranslate text-nowrap">button</code>【按钮】模式或多个复选框模式均不支持不确定。还请注意，普通复选框（即使用 <code translate="no" class="notranslate text-nowrap">plain</code>【普通】属性）在Windows / Linux / Mac / Android上也支持不确定状态，但在 iOS 上不支持。</p>
<h3 id="indeterminate-state-and-accessibility" class="bv-no-focus-ring"><span class="bd-content-title">不确定的状态和可访问性<a class="anchorjs-link" href="#indeterminate-state-and-accessibility" aria-labelledby="indeterminate-state-and-accessibility"></a></span></h3>
<p>并非所有屏幕阅读器都会将不确定状态传达给屏幕阅读器用户。因此，如果不确定状态在您的应用程序中具有特殊的上下文含义，则建议向用户提供某种形式的文本反馈（可能通过 <code translate="no" class="notranslate text-nowrap">.sr-only</code> 类）。</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form-checkbox#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-checkbox-group&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-checkbox/form-checkbox-group.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-group-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-group-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-group-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-group-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-group-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox-group&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-checkbox-group&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-check-group&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2977">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__2977__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="name" class="" id="__BVID__2977__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__2977__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="required" class="" id="__BVID__2977__row_required">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">required</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将'required'【需要】属性添加到表单控件</td>
</tr>
<tr role="row" data-pk="form" class="" id="__BVID__2977__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的 ID 。在控件上设置“form”属性</td>
</tr>
<tr role="row" data-pk="autofocus" class="" id="__BVID__2977__row_autofocus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">autofocus</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，尝试在安装控件时自动将其调焦，或者在保持活动状态时将其重新激活。未在控件上设置“autofocus”属性</td>
</tr>
<tr role="row" data-pk="validated" class="" id="__BVID__2977__row_validated">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">validated</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将 Bootstrap 类“was-validated”添加到组包装器中</td>
</tr>
<tr role="row" data-pk="aria-invalid" class="" id="__BVID__2977__row_aria-invalid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-invalid</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在包装器元素上设置“ aria-invalid”属性值。如果未提供，“state”属性将控制属性</td>
</tr>
<tr role="row" data-pk="stacked" class="" id="__BVID__2977__row_stacked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">stacked</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，以堆叠模式呈现复选框组</td>
</tr>
<tr role="row" data-pk="plain" class="" id="__BVID__2977__row_plain">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">plain</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以普通模式而不是自定义样式模式呈现表单控件</td>
</tr>
<tr role="row" data-pk="buttons" class="" id="__BVID__2977__row_buttons">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">buttons</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用按钮样式呈现此组中的复选框</td>
</tr>
<tr role="row" data-pk="button-variant" class="" id="__BVID__2977__row_button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'secondary'</code></td>
<td aria-colindex="4" role="cell" class="">指定适用于按钮样式复选框的 Bootstrap 上下文颜色主题变量</td>
</tr>
<tr role="row" data-pk="options" class="" id="__BVID__2977__row_options">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">options</code></td>
<td aria-colindex="2" role="cell" class="">Array or Object</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">要在组件中渲染的项目数组</td>
</tr>
<tr role="row" data-pk="value-field" class="" id="__BVID__2977__row_value-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value-field</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'value'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中的字段名称，该字段名称应用于该值</td>
</tr>
<tr role="row" data-pk="text-field" class="" id="__BVID__2977__row_text-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text-field</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'text'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中应用于文本标签的字段名称</td>
</tr>
<tr role="row" data-pk="html-field" class="" id="__BVID__2977__row_html-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">html-field</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'html'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中的字段名称，应该用于 html 标签而不是文本字段。请谨慎使用。</td>
</tr>
<tr role="row" data-pk="disabled-field" class="" id="__BVID__2977__row_disabled-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled-field</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'disabled'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中应用于禁用状态的字段名称</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__2977__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>
<tr role="row" data-pk="state" class="" id="__BVID__2977__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态</td>
</tr>
<tr role="row" data-pk="switches" class="" id="__BVID__2977__row_switches">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">switches</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用开关样式渲染组中的复选框</td>
</tr>
<tr role="row" data-pk="checked" class="" id="__BVID__2977__row_checked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">checked</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">组中选中的复选框的当前值。有多个复选框时必须为数组</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__3008">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__3017">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="first" class="" id="__BVID__3017__row_first">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">first</code></td>
<td aria-colindex="2" role="cell" class="">用于放置 b-form-check 的插槽，以便它们出现在由 options【选项】属性生成的检查之前</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-group-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-group-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-group-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__3026">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="input" class="" id="__BVID__3026__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code> - <span data-v-866a22e8="">复选框的值。值将是一个数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">更改检查值时发出</td>
</tr>
<tr role="row" data-pk="change" class="" id="__BVID__3026__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code> - <span data-v-866a22e8="">复选框的值。值将是一个数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">由于用户交互而更改选定值时发出</td>
</tr>
</tbody>
</table>
</div>
</article>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-checkbox" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-checkbox&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-checkbox/form-checkbox.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-checkbox-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-checkbox&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-checkbox&gt;</code></li>
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-check&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__3043">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="value" class="" id="__BVID__3043__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code></td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">true</code></td>
<td aria-colindex="4" role="cell" class="">选中此复选框时返回的值</td>
</tr>
<tr role="row" data-pk="checked" class="" id="__BVID__3043__row_checked">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">checked</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">复选框的当前值。当有多个复选框绑定到同一 v-model 时，必须是一个数组</td>
</tr>
<tr role="row" data-pk="inline" class="" id="__BVID__3043__row_inline">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">inline</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将复选框呈现为内联元素而不是宽度为100％的块</td>
</tr>
<tr role="row" data-pk="plain" class="" id="__BVID__3043__row_plain">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">plain</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以普通模式而不是自定义样式模式呈现表单控件</td>
</tr>
<tr role="row" data-pk="button" class="" id="__BVID__3043__row_button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，呈现带有按钮外观的复选框</td>
</tr>
<tr role="row" data-pk="button-variant" class="" id="__BVID__3043__row_button-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">button-variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在“button”模式下适用于 Bootstrap 的主题颜色</td>
</tr>
<tr role="row" data-pk="aria-label" class="" id="__BVID__3043__row_aria-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-label</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置渲染元素上“aria-label”属性的值</td>
</tr>
<tr role="row" data-pk="aria-labelledby" class="" id="__BVID__3043__row_aria-labelledby">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-labelledby</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">提供此组件标签的元素的ID。用作“aria-labelledby”属性的值</td>
</tr>
<tr role="row" data-pk="id" class="" id="__BVID__3043__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在呈现的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="name" class="" id="__BVID__3043__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__3043__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="required" class="" id="__BVID__3043__row_required">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">required</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将“required”属性添加到表单控件</td>
</tr>
<tr role="row" data-pk="form" class="" id="__BVID__3043__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的ID。在控件上设置“form”属性</td>
</tr>
<tr role="row" data-pk="autofocus" class="" id="__BVID__3043__row_autofocus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">autofocus</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“ true”时，尝试在安装控件时自动将其调焦，或者在保持活动状态时将其重新激活。未在控件上设置“autofocus”属性</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__3043__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>
<tr role="row" data-pk="state" class="" id="__BVID__3043__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。 “ true”表示有效，“ false”表示无效”，“ null”表示无验证状态</td>
</tr>
<tr role="row" data-pk="unchecked-value" class="" id="__BVID__3043__row_unchecked-value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">unchecked-value</code></td>
<td aria-colindex="2" role="cell" class="">Any</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">取消选中此复选框时返回的值。 当多个复选框绑定到同一 v-model 数组时，注意不适用</td>
</tr>
<tr role="row" data-pk="indeterminate" class="" id="__BVID__3043__row_indeterminate">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">indeterminate</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使复选框处于不确定状态。 通过.sync修饰符可同步</td>
</tr>
<tr role="row" data-pk="switch" class="" id="__BVID__3043__row_switch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">switch</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用复选框外观呈现复选框</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__3072">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-checkbox-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-checkbox#comp-ref-b-form-checkbox-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-checkbox-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__3081">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="input" class="" id="__BVID__3081__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code> - <span data-v-866a22e8="">复选框的值。当绑定到多个复选框时，value将是一个数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">更改所选值时发出</td>
</tr>
<tr role="row" data-pk="change" class="" id="__BVID__3081__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">checked</code> - <span data-v-866a22e8="">复选框的值。当绑定到多个复选框时，value将是一个数组。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">由于用户交互而更改选定值时发出</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-checkbox#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__3093">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-checkbox-group&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormCheckboxGroup</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-checkbox&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormCheckbox</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormCheckboxGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-checkbox-group'</span>, BFormCheckboxGroup)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 作为Vue.js插件导入 <a href="../../../bootstrap-vue/docs/components/form-checkbox#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 这个插件包含了上面列出的所有组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__3104">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormCheckboxPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormCheckboxPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormCheckboxPlugin)</pre></figure>
</article>






















</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
